<template>
<button :class="btnSize+' '+type+' '+plainClass+' '+disabledClass" :disabled="disabled">
    <slot name="icon">
    </slot>
    <slot></slot>
    <template v-if="loading">
        <slot name="loading">
    </slot>
    </template>
    
</button>
</template>
<script setup>
import { defineProps,computed,defineExpose } from 'vue';

const props = defineProps({
    size: {
        // 'large' | 'default' | 'small'
        type: String,
        default:'default'
    },
    type:{
        // 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
        type: String,
        default:'primary'
    },
    plain: {
        type: Boolean,
        default: false
    },
    disabled:{
        type: Boolean,
        default: false
    },
    loading:{
        type: Boolean,
        default: false
    }

});

const btnSize = computed(() => {
    return 'font'+props.size;
});
const plainClass = computed(() => {
    return 'plain'+props.plain
});

const disabledClass = computed(() => {
    return 'disabled'+props.disabled
});

defineExpose({
    size: props.size,
    type: props.type,
    disabled: props.disabled
});
</script>
<style scoped>
button{
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
}
.fontlarge {
    font-size: 20px;
}
.fontdefault {
    font-size: 16px;
}
.fontsmall {
    font-size: 12px;
}
.primary {
    border: 1px solid #008bff;
    background-color: #008bff;
    color: #fff;
}
.success {
    border: 1px solid #5cb85c;
    background-color: #5cb85c;
    color: #fff;
}
.warning {
    border: 1px solid #f0ad4e;
    background-color: #f0ad4e;
    color: #fff;
}
.danger {
    border: 1px solid #d9534f;
    background-color: #d9534f;
    color: #fff;
}
.info {
    border: 1px solid #5bc0de;
    background-color: #5bc0de;
    color: #fff;
}
.text {
    border: 1px solid #000;
    background-color: #ffffff;
    color: #000;
}
.plaintrue{
    background:none;
    color: #000;
}
.disabledtrue{
    border: 1px solid #bbb;
    background:#bbb;
    color: #FFF;
}

</style>